<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue-test</title>
    <script src="./vue.js"></script>
    <!-- <link rel="stylesheet" href="http://at.alicdn.com/t/font_765291_hcoc72g338l.css"> -->
    <link rel="stylesheet" href="./static/iconFont/iconfont.css">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>
    <div id="app-1">
        <p>{{msg}}</p>
    </div>
    <div id="app-2">
    </div>
    <div id="app-3">
        <p>{{msg1}}</p>
        <p v-text="msg2"></p>
        <p v-html="content"></p>
    </div>
    <div id="app-4">
        <p v-bind:title="app_4_title">app-4</p>
        <input type="text" v-model="msg" placeholder="请输入...">
        <p>{{msg}}</p>
    </div>
    <div id="app-5">
        姓：
        <input type="text" v-model="firstName" placeholder="请输入..."> 名：
        <input type="text" v-model="secondName" placeholder="请输入...">
        <p v-show="f_s_show">您好，您的姓名是{{fullName}}。</p>
        <span class="iconfont el_icon_cwq-close-circle"></span>
        <span class="iconfont">&#xe7df;</span>
        <span class="iconfont el_icon_cwq-wifi"></span>
    </div>
    <div id="app-6">
        <p v-if="if_show">if_show</p>
        <button v-on:click="handlerIfClick">v_if</button>
        <p v-show="show_show">show_show</p>
        <button @click="handlerShowClick">v_show</button>
        <ul>
            <li v-for="(item,index) of list" :key="index">{{item}}</li>
        </ul>
        <input type="text" v-model="inputValue" placeholder="请输入...">
        <button v-on:click="inputClick">提交开发</button>
        <ul>
            <li v-for="(inputItem,inputIndex) of inputList" :key="inputIndex">{{inputItem}}</li>
        </ul>
    </div>
    <div id="app-7">
        <input type="text" v-model="inputValue" placeholder="请输入...">
        <button @click="inputClick">提交拆分</button>
        <ul>
            <todo-item v-for="(inputItem,inputIndex) of inputList" :key="inputIndex" :content="inputItem"></todo-item>
        </ul>
    </div>
    <div id="app-8">
        <input type="text" placeholder="请输入..." v-model="inputValue">
        <button @click="handlerClick">提交</button>
        <ul class="todoListModel">
            <todolist v-for="(inputItem,inputIndex) of list" :key="inputIndex" :content="inputItem" @delete="delete_item"></todolist>
            <!-- <span class="iconfont el_icon_cwq-close-circle\"></span> -->
        </ul>
    </div>
    <script src="./index.js"></script>
</body>

</html>